<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 顶部 start-->
        <div class="btn_wrapper">
          <span>说明：目前支持学科和关键字条件筛选</span>
          <el-button type="success" size="medium" @click="$router.push('new')">新增试题</el-button>
        </div>
        <!-- 顶部end -->

        <!-- form表单 start -->
        <el-form ref="form" :model="form" label-width="80px">
          <el-col>
            <el-form-item label="学科">
              <el-select v-model="form.subjectID" placeholder="请选择" @change="getSecond($event)">
                <el-option v-for="item in subjectlist" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级目录">
              <el-select placeholder="请选择" v-model="form.catalogID" >
               <el-option v-for="item in catatory" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标签">
              <el-select placeholder="请选择" v-model="form.tags">
                  <el-option v-for="item in label" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关键字">
              <el-input placeholder="根据题干搜索" v-model="form.keyword"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="试题类型">
              <el-select v-model="form.questionType" placeholder="请选择">
                <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="难度">
              <el-select v-model="form.difficulty" placeholder="请选择">
                <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方向">
              <el-select v-model="form.direction" placeholder="请选择">
                <el-option v-for="(item,index) in direction" :key="index" :label="item" :value="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="录入人">
              <el-select v-model="form.creatorID" placeholder="请选择">
                <el-option v-for="item in people" :key="item.id" :label="item.username" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="题目备注">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
            <el-form-item label="企业简称">
              <el-input v-model="form.shortName"></el-input>
            </el-form-item>
            <el-form-item label="城市" >
              <el-select v-model="form.province" placeholder="请选择" @change="getAreaClick($event)" style="width:49%;margin-right:5px">
                <el-option v-for="(item,index) in city" :key="index" :label="item" :value="index">
                </el-option>
              </el-select>
              <el-select v-model="form.city" placeholder="请选择" style="width:48%">
                <el-option v-for="(item,index) in area" :key="index" :label="item" :value="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="display:flex;  justify-content:end;">
              <el-button size="small" @click="clear()">清除</el-button>
              <el-button type="primary" size="small" @click="search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-form>
        <!-- form 表单end -->
        <el-main>
          <el-tabs type="card"  @tab-click="waitCheck">
            <el-tab-pane label="全部">
              <el-alert  :closable="false" type="info"><i class="el-icon-info" style="margin-right:3px" />数据一共 {{counts}} 条</el-alert>
              <QuestionsSearch :flag="questionList"  @updateList="getChoice" @allCheck="updateAll"></QuestionsSearch>
            </el-tab-pane>
            <el-tab-pane label="待审核">
              <el-alert  :closable="false" type="info"><i class="el-icon-info" style="margin-right:3px" />数据一共 {{total}} 条</el-alert>
              <QuestionsSearch :flag="waitList"  @updateList="getChoice"></QuestionsSearch>
              </el-tab-pane>
            <el-tab-pane label="已审核">
              <el-alert  :closable="false" type="info"><i class="el-icon-info" style="margin-right:3px" />数据一共 {{total}} 条</el-alert>
              <QuestionsSearch :flag="waitList" @updateList="getChoice"></QuestionsSearch></el-tab-pane>
            <el-tab-pane label="已拒绝">
              <el-alert  :closable="false" type="info"><i class="el-icon-info" style="margin-right:3px" />数据一共 {{total}} 条</el-alert>
              <QuestionsSearch :flag="waitList" @updateList="getChoice"></QuestionsSearch>
              </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-card>
    </div>
  </div>
</template>

<script>
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { choice } from '@/api/hmmm/questions.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as getSimple } from '@/api/hmmm/directorys'
import { simple as tagsSimple } from '@/api/hmmm/tags.js'
import { list as getPeople } from '@/api/base/users.js'
import QuestionsSearch from '../components/questions-search.vue'
export default {
  data () {
    return {
      // 绑定表单数据
      form: {
        subjectID: '',
        tags: '',
        catalogID: '',
        keyword: '',
        questionType: '',
        creatorID: '',
        direction: '',
        difficulty: '',
        remarks: '',
        city: '',
        shortName: '', // 企业简称
        province: ''
      },
      // 精选题库列表
      questionList: [],
      difficulty, // 难度
      questionType, // 题型
      direction, // 方向
      city: {}, // 城市
      area: {}, // 地区
      subjectlist: [],
      catatory: [], // 二级目录
      people: [],
      label: [],
      waitList: [], // 等待审查数据
      total: '',
      counts: '',
      page: {
        page: 1, // 当前页
        pagesize: 5, // 每页条数
        counts: 0 // 记录总数
      }
    }
  },
  methods: {
    // 获取精选题库列表
    async getChoice (page) {
      if (page) {
        this.page = page
      }
      const res = await choice(this.page)
      this.questionList = res.data.items
      this.counts = res.data.counts // 数据总条数
      // 从基础题库加入精选题库后 精选题库列表立刻更新渲染
      // this.getChoice()
    },
    // 获取学科列表
    async  subjectList () {
      const res = await simple()
      this.subjectlist = res.data
    },
    // 获取录入人
    async getPeople () {
      const res = await getPeople()
      this.people = res.data.list
    },
    // 清除表单
    clear () {
      this.form = {}
      this.getChoice()
    },
    // 获取省和城市的数据信息
    getArea () {
      this.city = provinces()
    },
    // 选中学科时触发change事件
    async getSecond (id) {
      // val表示当前选中学科的id 用该id获取二级目录数据
      const res = await getSimple({ subjectID: id })
      this.catatory = res.data
      const res1 = await tagsSimple({ subjectID: id })
      this.label = res1.data
    },

    // 点击市之后 触发change事件得到当前选中的id 获取区列表
    getAreaClick (id) {
      this.form.areas = ''
      this.area = citys(this.city[id])
    },
    // 点击搜索 查询
    async search () {
      const res = await choice(this.form)
      this.questionList = res.data.items
    },
    // tab栏切换 待审核
    async waitCheck (tab) {
      let chkState = null
      if (tab._props.label === '待审核') {
        chkState = 0
      } else if (tab._props.label === '已审核') {
        chkState = 1
      } else {
        chkState = 2
      }
      const res = await choice({ chkState })
      this.total = res.data.counts
      this.waitList = res.data.items
    },
    async  updateAll (obj) {
      const res = await choice(obj)
      this.questionList = res.data.items
    }
  },
  components: {
    QuestionsSearch
  },
  created () {
    // 初始化精选题库列表
    this.getChoice()
    // 获取省和城市的数据信息
    this.getArea()
    // 获取学科列表
    this.subjectList()
    // 获取录入人
    this.getPeople()
    // 待审查页面
    // this.waitCheck()
  }
}

</script>

<style scoped>
.btn_wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.btn_wrapper span {
  font-size: 12px;
  color: pink;
}
.el-col {
  display: flex;
}
.el-form-item {
  flex: 1;
}
</style>
